<template>
  <h2>TO-DO LIST</h2>
  <input type="text" v-model="ipt">
  <button @click="handleClick">提交</button>
  <ul>
    <li v-for="(item,index) in arr1" :key="item">{{item}}<b @click="del(index)">x</b></li>
  </ul>
</template>
<script setup>
    import {ref} from "vue"
    let ipt = ref("")

    let arr1 = ref([])
    
    let handleClick = function (){
        arr1.value.push(ipt.value)
    }

    let del = function(index){
        arr1.value.splice(index,1)
    }

</script>

<style>
    b {
        margin-left: 10px;
        color: red;
    }
</style>